<template>
	<view class="item">
		<view class="item__wrapper" @click="handleClick">
			<view class="item__cont">
				<text class="item__name">{{ itemData.name }}</text>
				<text class="item__desc">{{ itemData.name }}</text>
			</view>
			<image v-if="isHasChildren" class="item__arrow" src="@/static/image/down.png">
			<navigator v-else class="item__nav" :url="`/pagesA/teaching/detail?name={{itemData.name}}&id={{itemData.id}}&uuid={{itemData.uuid}}`" hover-class="navigator-hover">
				<button type="default" size="mini">去学习</button>
			</navigator>
		</view>	
		<view class="item__children"  v-if="isExpand && isHasChildren">
			<tree-item :itemData="item" v-for="item in itemData.children" :key="item.uuid" :level= "level + 1"/>
		</view>
	</view>
</template>

<script>
	import TreeItem from "@/components/treeItem.vue";

	export default {
		components: { TreeItem },
		name: "tree-item",
		props: {
			itemData: {
				type: Object,
				default: () => ({}),
			},
			level: {
				type: Number,
				default: () => 1,
			},
		},
		computed: {
			isHasChildren() {
				return this.itemData.children && this.itemData.children.length > 0;
			},
		},
		data() {
			return {
				isExpand: false,
			};
		},
		methods: {
			handleClick() {
				this.isExpand = !this.isExpand;
			},
		},
	}
</script>

<style lang="scss" scoped>
.item {
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	&__wrapper {
		display: flex;
		align-items: center;
	}
	&__cont {
		flex: 1;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
	}
	&__name {
		font-size: 28rpx;
		color: #333;
		display: block;
	}
	&__desc {
		font-size: 24rpx;
		color: gray;
		display: block;
		margin-top: 5rpx;
	}
	&__arrow {
		width: 30rpx;
		height: 30rpx;
	}
	&__children {
		.tree-item {
			margin-top: 1rpx solid $km-border-color;
		}
	}
	&__nav {
		display: flex;
		button {	
			color: $km-text-color;
			border-radius: 30rpx;
			padding: 6rpx 25rpx;
			background-color: $km-backound-color;
			border: 1rpx solid lightgray;
			line-height: normal;
			font-size: 28rpx;
			&::after {
				content: none;
			}	
		}
	}
}
.tree-item:nth-child(n+2) {
	border-top: 1rpx solid #f8f8f8;
}
</style>